import React from "react"
import styles from './index.less'

interface GhostIProps {
  x: number
  y: number
  colour: string
  onClick: Function
}

interface BodyIprops {
  x: number
  y: number
  colour: string
}

interface EyesIprops {
  x: number
  y: number
  onClick?: Function
}

interface DialIProps {
  angle: number
}

const Eyes = (props: EyesIprops) => {
  return (
    <g onClick={props.onClick}>
      <circle cx={props.x - 5} cy={props.y} r={6} fill={'white'} />
      <circle cx={props.x + 5} cy={props.y} r={6} fill={'white'} />
      <circle cx={props.x - 3} cy={props.y} r={3} fill={'black'} />
      <circle cx={props.x + 3} cy={props.y} r={3} fill={'black'} />
    </g>
    )
}

const Body = (props: BodyIprops) => {
  return (
    <g>
      <circle cx={props.x} cy={props.y} r={20} fill={props.colour}/>
      <rect x={props.x - 20} y={props.y} width={40} height={30} fill={props.colour} />
    </g>
    )
}

const Ghost = (props: GhostIProps) => {
  return (
    <g onClick={props.onClick}>
      <Body x={props.x} y={props.y} colour={props.colour} />
      <Eyes x={props.x} y={props.y} />
    </g>
    )
}

const Dial = (props: DialIProps) => {
  return (
    <g transform={`rotate(${props.angle})`}>
      <circle cx={0} cy={0} r={10} fill={'#666666'} />
      <circle cx={-10} cy={0} r={3} fill={'#006633'} />
    </g>
    )
}


const People = () => {
  return (
    <div>
      <h3 className={styles.title}>
        <span>this is 210's girls</span>
      </h3>
      <svg
        viewBox={'0 0 100 100'}
        style={{width: 600, height: 200, backgroundColor: '#CCFFCC'}}
      >
        <Ghost x={40} y={40} colour={'#6666CC'} onClick={() => {alert('my name is Bule BoBo')}} />
        <Ghost x={70} y={40} colour={'#FF9999'} onClick={() => {alert('my name is yellow yeloo')}} />
        <Ghost x={100} y={40} colour={'#99CCFF'} onClick={() => {alert('my name is yellow yeloo')}} />
        <Ghost x={130} y={40} colour={'#FF9966'} onClick={() => {alert('my name is yellow yeloo')}} />
        <Ghost x={160} y={40} colour={'#FFCCCC'} onClick={() => {alert('my name is yellow yeloo')}} />
      </svg>
      <svg
        viewBox={'-100 -100 200 200'}
        style={{width: 600, height: 200, backgroundColor: '#99CCCC'}}
      >
        <Ghost x={40} y={40} colour={'#6666CC'} onClick={() => {alert('my name is Bule BoBo')}} />
        <Ghost x={70} y={40} colour={'#FF9999'} onClick={() => {alert('my name is yellow yeloo')}} />
        <Ghost x={100} y={40} colour={'#99CCFF'} onClick={() => {alert('my name is yellow yeloo')}} />
        <Ghost x={130} y={40} colour={'#FF9966'} onClick={() => {alert('my name is yellow yeloo')}} />
        <Ghost x={160} y={40} colour={'#FFCCCC'} onClick={() => {alert('my name is yellow yeloo')}} />
      </svg>
      <svg viewBox={'-50 -50 100 100'}>
        <Dial angle={15}/>
      </svg>
    </div>
  )
}

export default People
